<template>
	<tm-fullView>
		<tm-menubars title="开关" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet>
			
			<view class="text-size-s text-weight-b mb-24">基本示例</view>
				
			<tm-row>
					<tm-col :grid="3"><tm-switch loadding v-model="on"></tm-switch></tm-col>
					<tm-col :grid="3"><tm-switch :text="['嗯','禁']" color="bg-gradient-blue-accent" v-model="on"></tm-switch></tm-col>
					<tm-col :grid="3"><tm-switch  :text="['off','on']" color="bg-gradient-orange-accent" v-model="on"></tm-switch></tm-col>
					<tm-col :grid="3"><tm-switch loadding :text="['','']" color="pink" v-model="on"></tm-switch></tm-col>
					
			</tm-row>
			<view class="py-24"></view>
			<tm-grouplist :margin="0" :shadow="24">
				<tm-listitem title="自定大小">
					<template v-slot:rightIcon="">
						<tm-switch :width="260" :height="80" offBgcolor="blue" :text="['长打开','我是关闭']" color="bg-gradient-orange-accent" v-model="on"></tm-switch>
					</template>
				</tm-listitem>
				<tm-listitem title="关闭的颜色">
					<template v-slot:rightIcon="">
						<tm-switch offBgcolor="yellow text-black" :text="['开','关']" color="blue" v-model="on"></tm-switch>
					</template>
				</tm-listitem>
				<tm-listitem title="我被禁用">
					<template v-slot:rightIcon="">
						<tm-switch disabled :text="['','']" color="bg-gradient-red-accent" v-model="jinyong"></tm-switch>
					</template>
				</tm-listitem>
			</tm-grouplist>
			<view class="py-24"></view>
			<tm-grouplist black :margin="0" :shadow="24">
				<tm-listitem black title="黑暗主题">
					<template v-slot:rightIcon="">
						<tm-switch black :text="['','']" loadding color="green" v-model="on"></tm-switch>
					</template>
				</tm-listitem>
				
				<tm-listitem black title="点我触发事件">
					<template v-slot:rightIcon="">
						<tm-switch black @change="change" name="顺心"  color="bg-gradient-pink-accent" v-model="on"></tm-switch>
					</template>
				</tm-listitem>
			</tm-grouplist>
			
			<view style="height: 50upx;"></view>
		</tm-sheet>
	</tm-fullView>
	

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSwitch from "@/tm-vuetify/components/tm-switch/tm-switch.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	import tmGrouplist from "@/tm-vuetify/components/tm-grouplist/tm-grouplist.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSwitch,tmListitem,tmGrouplist,tmRow,tmCol},
		data() {
			return {
				on:false,
				jinyong:false
			}
		},
		mounted() {
			this.on=true;
		},
		methods: {
			change(e){
				uni.$tm.toast(JSON.stringify(e))
			}
		}
	}
</script>

<style>

</style>
